<script lang="ts" setup>
import { debounce } from "@pureadmin/utils";
import * as echarts from "echarts";
import { defineProps, onMounted, onUnmounted, ref, watchEffect } from "vue";

const props = defineProps<{
  data: {
    value: string;
    min?: number;
    max?: number;
    splitNumber?: number;
    unit?: string;
  };
}>();
const chartRef = ref();
const charts = ref([]);
let myChart = null;
// 单仪表盘
const initSingle = () => {
  if (!chartRef.value) {
    return;
  }
  if (!myChart) {
    // myChart.clear();
    myChart = echarts.init(chartRef.value);
  } else {
    // myChart = echarts.init(chartRef.value);
  }
  const { data } = props;
  const option = {
    series: [
      {
        type: "gauge",
        radius: "80%",
        startAngle: 215,
        endAngle: -35,
        // min: data[0].min || 0,
        // max: data[0].max || data[0].max === 0 ? data[0].max : 100,
        progress: {
          show: true,
          width: 8,
          itemStyle: {
            // color: "rgba(33, 116, 255, 1)"
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#66E1DF" // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "#009DFF"
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 8,
            color: [[1, "rgba(86, 108, 145, 1)"]]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          length: 5,
          distance: -15,
          lineStyle: {
            width: 1,
            color: "rgba(255,255,255,0.4)"
          }
        },
        pointer: {
          show: false
        },
        axisLabel: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: Number(data.value?.replace("%", ""))
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option, false);
  if (!charts.value.includes(myChart)) {
    charts.value.push(myChart);
  }
};
// 处理窗口大小变化
const handleResize = debounce(() => {
  charts.value.forEach(chart => {
    chart.resize();
  });
}, 60);
watchEffect(() => {
  initSingle();
});
onMounted(() => {
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  charts.value.forEach(chart => {
    chart.dispose();
  });
});
</script>
<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart-guage"></div>
    <div class="label-single">
      <div>
        <span class="label-single-num">{{ data.value.replace("%", "") }}</span
        ><sub class="label-single-unit">%</sub>
      </div>
    </div>
    <div class="chart-range"><span>0%</span><span>100%</span></div>
  </div>
</template>
<style lang="scss" scoped>
.chart-container {
  width: 110rpx;
  height: 110rpx;
  margin: 0 auto;
  position: relative;
}
.chart-guage {
  width: 100%;
  height: 110rpx;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
// ercBarBg
.label-single {
  width: 60%;
  height: 60%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("/ifp-web-static/image/all/leadScreenNew/ercBarBg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  &-num {
    font-size: 20rpx;
    font-family: AlibabaPuHuiTiM;
    color: #2ba471;
    line-height: 27rpx;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.51);
    background: linear-gradient(180deg, #ffffff 0%, #aab6b1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  &-unit {
    font-size: 14rpx;
    font-family: AlibabaPuHuiTiM;
    color: rgba(255, 255, 255, 0.6);
    line-height: 20rpx;
  }
}
.chart-range {
  padding: 0 18rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10rpx;
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 14rpx;
  position: absolute;
  bottom: 8rpx;
  left: 0;
}
</style>
